<template>
	<view class="uni-wrap">
		<u-sticky bgColor="#fff">
			<u-tabs
				:list="tabList"
				:scrollable="false"
				:activeStyle="{
					fontWeight: 'bold'
				}"
				@click="tabClick">
			</u-tabs>
		</u-sticky>
		
		<view v-if="tabIndex === 0">
			<view class="data-box">
				<view class="form-block">
					<view class="card">
						<view class="card-body">
							<u--form
							class="from-card"
							labelWidth="80"
							:model="info"
							:rules="rules"
							ref="ruleForm">
								<u-form-item
								label="项目名称"
								prop="projectName"
								required
								@click="gotoPage('/subPackTask/taskButler/chooseProject')"
								borderBottom>
									<u--input
										v-if="!info.projectName"
										disabled
										disabledColor="#ffffff"
										suffixIcon="arrow-right"
										v-model="info.projectName"
										placeholder="请选择"
										inputAlign="right"
										border="none">
									</u--input>
									<u--textarea
										v-if="info.projectName"
										autoHeight
										border="none"
										v-model="info.projectName">
									</u--textarea>
								</u-form-item>
								<u-form-item
								label="成果名称"
								prop="fruitName"
								required
								borderBottom>
									<u--textarea
										autoHeight
										border="none"
										placeholder="请输入成果名称"
										v-model="info.fruitName">
									</u--textarea>
								</u-form-item>
								<u-form-item
								label="委托单位"
								prop="firstCompany"
								required
								borderBottom>
									<u--input
									v-model="info.firstCompany"
									placeholder="请输入委托单位"
									inputAlign="right"
									border="none">
									</u--input>
								</u-form-item>
								<u-form-item
								label="甲方姓名"
								prop="firstContacts"
								required
								borderBottom>
									<u--input
									v-model="info.firstContacts"
									placeholder="请输入甲方姓名"
									inputAlign="right"
									border="none">
									</u--input>
								</u-form-item>
								<u-form-item
								label="联系方式"
								prop="firstPhone"
								required
								borderBottom>
									<u--input
									v-model="info.firstPhone"
									type="number"
									placeholder="请输入联系方式"
									inputAlign="right"
									border="none">
									</u--input>
								</u-form-item>
								<u-form-item
								label="测量开始时间"
								prop="beginTimeName"
								labelWidth="100"
								required
								@click="dateShow = true;dateField = 'beginTime';"
								borderBottom>
									<u--input
									disabled
									disabledColor="#ffffff"
									suffixIcon="arrow-right"
									placeholder="请选择"
									inputAlign="right"
									v-model="info.beginTime"
									border="none">
									</u--input>
								</u-form-item>
								<u-form-item
								label="测量结束时间"
								prop="endTimeName"
								labelWidth="100"
								required
								@click="dateShow = true;dateField = 'endTime';"
								borderBottom>
									<u--input
									disabled
									disabledColor="#ffffff"
									suffixIcon="arrow-right"
									placeholder="请选择"
									inputAlign="right"
									v-model="info.endTime"
									border="none">
									</u--input>
								</u-form-item>
								<u-form-item
								label="成果移交时间"
								prop="timeName"
								labelWidth="100"
								required
								@click="dateShow = true;dateField = 'time';"
								borderBottom>
									<u--input
									disabled
									disabledColor="#ffffff"
									suffixIcon="arrow-right"
									placeholder="请选择"
									inputAlign="right"
									v-model="info.time"
									border="none">
									</u--input>
								</u-form-item>
								<u-form-item
								label="项目负责人"
								prop="fzrName"
								required
								@click="gotoPage('/components/choose-user/choosePer?chooseType=单选&chooseUsers='+JSON.stringify(zjUser))"
								borderBottom>
									<u--input
									disabled
									disabledColor="#ffffff"
									suffixIcon="arrow-right"
									v-model="info.fzrName"
									placeholder="请选择"
									inputAlign="right"
									border="none">
									</u--input>
								</u-form-item>
								<u-form-item
								label="测量人员"
								prop="clry"
								required
								@click="gotoPage('/components/choose-user/choosePer?chooseType=多选&chooseUsers='+JSON.stringify(cyrUsers))"
								borderBottom>
									<u--input
									disabled
									disabledColor="#ffffff"
									suffixIcon="arrow-right"
									v-model="info.clry"
									placeholder="请选择"
									inputAlign="right"
									border="none">
									</u--input>
								</u-form-item>
								<u-form-item
								label="情况说明"
								prop="remark"
								borderBottom>
									<u--textarea
									v-model="info.remark"
									border="none"
									autoHeight
									count
									height="140"
									placeholder="请输入情况说明" >
									</u--textarea>
								</u-form-item>
							</u--form>
						</view>
					</view>
				</view>
			</view>
			
			<!-- <uni-group>
				<u--form
				class="from-card"
				labelPosition="top"
				labelWidth="180">
					<u-form-item label="附件图片">
						<u-upload
							:fileList="imageList"
							@afterRead="afterRead($event,'imageList')"
							@delete="deletePic($event,'imageList')"
							:multiple="true"
							:maxCount="9">
						</u-upload>
					</u-form-item>
				</u--form>
			</uni-group> -->
			
			<!-- 流程组件 -->
			<view>
				<flow-path
				:process="process"
				v-on:deleteuser="deletePers"
				v-on:switchSpUserArr="changeSpUserArr"
				></flow-path>
			</view>
			
			<view class="submit-button">
				<view class="submit-block" @click="submit()">
					提交
				</view>
			</view>
		</view>
		
		<view v-if="tabIndex == 1">
			<view style="margin-top: 100rpx;" v-if="list.length < 1">
				<u-empty
					text="暂无数据"
					icon="https://www.zxsl.zxmap.cn/zxch-app/2023/07/21/005b6980c9514d1e8e4a0cee0de018e4.png">
				</u-empty>
			</view>
			<u-swipe-action>
				<u-swipe-action-item
					:disabled="true"
					:options="options"
					v-for="(item,index) in list" :key="item.id">
					<view class="swipe-action u-border-top u-border-bottom" @click="gotoPage('/subPackTask/ountersign/detail?spType=用户&id='+item.id)">
						<view class="PhotographerBoxR" style="margin-left: 30rpx;">
							<view class="text-sm text-black" style="font-size: 32rpx;">
								<view>{{item.userName}}提交的成果会签</view>
								<view class="text-sm text-grey" style="position: absolute;right: 0;top:0;margin: 25rpx 50rpx 0 0;">
									{{item.tjDate}}
								</view>
							</view>
							<view class="text-sm text-grey margin-top-xs">成果名称：{{item.fruitName}}</view>
							<view class="text-sm text-grey margin-top-xs">开始时间：{{item.beginTime}}</view>
							<view class="text-sm text-grey margin-top-xs">结束时间：{{item.endTime}}</view>
							<view class="text-sm text-grey margin-top-xs" style="display: flex;margin-top: 30rpx;">
								<view>
									<u-avatar v-if="item.avatar" size="20" shape="square" :src="item.avatar"></u-avatar>
									<u-avatar
										v-else
										size="20"
										shape="square"
										:text="item.userName.slice(1)"
										:fontSize="item.userName.length > 2?8:12"
										bgColor="#0087FC">
									</u-avatar>
								</view>
								<span style="padding-left: 10rpx;color: #000;font-size: 28rpx;">由{{item.userName}}提交</span>
								<view style="position: absolute;right: 0;margin-right: 48rpx;">
									<text v-if="item.status == 0" style="color: #E6900D;font-weight: 26rpx;">{{item.spName+'处理中'}}</text>
									<text v-if="item.status == 1" style="color: #269B54;font-weight: 26rpx;">审批通过</text>
									<text v-if="item.status == 2" style="color: #D67D6F;font-weight: 26rpx;">审批拒绝</text>
									<text v-if="item.status == 3" style="color: #909399;font-weight: 26rpx;">已撤销</text>
								</view>
							</view>
						</view>
					</view>
				</u-swipe-action-item>
			</u-swipe-action>
		</view>
		
		<u-picker
			:immediateChange="true"
			:show="pickShow"
			:columns="columns"
			@confirm="confirmPick"
			keyName="name"
			@cancel="pickShow = false">
		</u-picker>
		
		<u-datetime-picker
			:show="dateShow"
			v-model="dateValue"
			@cancel="dateShow = false"
			@confirm="confirmDate"
			mode="date">
		</u-datetime-picker>
	</view>
</template>

<script>
	import { listByNames, getSpList } from '@/api/user.js'
	import { getList,add } from '@/api/fruit.js'
	import { uploadFile,removeByOssId } from '@/api/upload'
	import { strFormatDate } from '@/utils/format.js'
	import { getDicts } from '@/api/dict.js'
	import flowPath from '@/components/flow-path-page/flow-path.vue'
	export default {
		components:{flowPath},
		data() {
			return {
				cyrUsers:[],
				dateField:'',
				dateShow:false,
				dateValue:String(new Date),
				imageList:[],
				pickIndex:0,
				pickField:'',
				pickShow:false,
				columns:[],
				showLength:4,
				pageNum:1,
				list:[],
				tabIndex:0,
				tabList:[
					{
						name: '发起提交',
					}, 
					{
						name: '查看数据',
					}
				],
				amountAll:'',
				range: [],
				imageStyles:{
					width:64,
					height:64,
				},
				process: [
					{
						title: '质检人',
						desc: '请选择质检人',
						perList: [],
						perRequire: true,
						switch: false,
					}, 
					{
						title: '审批人',
						desc: '请选择审批人',
						perList: [],
						perRequire: true,
						switch: true,
					}, 
					{
						title: '抄送人',
						desc: '请选择抄送人',
						perList: [],
						perRequire: true,
						switch: false,
					}, 
				],
				info:{
					projectName:'',
					fzrName:'',
					clry:'',
					remark:'',
					spList:[],
					csList:[],
				},
				rules:{
					'projectName': {
						required: true,
						message: '请选择所属项目',
						trigger: ['change']
					},
					'fruitName': {
						required: true,
						message: '请输入成果名称',
						trigger: ['change']
					},
					'firstCompany': {
						required: true,
						message: '请输入委托单位',
						trigger: ['change']
					},
					'firstContacts': {
						required: true,
						message: '请输入甲方姓名',
						trigger: ['change']
					},
					'firstPhone': {
						required: true,
						message: '请输入联系方式',
						trigger: ['change']
					},
					'beginTimeName': {
						required: true,
						message: '请选择任务开始时间',
						trigger: ['change']
					},
					'endTimeName': {
						required: true,
						message: '请选择任务结束时间',
						trigger: ['change']
					},
					'timeName': {
						required: true,
						message: '请选择成果移交时间',
						trigger: ['change']
					},
					'fzrName': {
						required: true,
						message: '请选择负责人',
						trigger: ['blur', 'change']
					},
					'clry': {
						required: true,
						message: '请选择测量人员',
						trigger: ['blur', 'change']
					},
				},
				desc1: '请选择审批人',
				desc2: '请选择抄送人',
				userList: [],
				csList: [],
				zjUser: [],
				spUserList: [],
				clickNmu: 0,
			}
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.ruleForm.setRules(this.rules)
		},
		onReachBottom(){
			if(this.tabIndex == 1){
				this.pageNum += 1
				this.getListData()
			}
		},
		onPullDownRefresh(){
			if(this.tabIndex == 1){
				this.pageNum = 1
				this.list = []
				this.getListData()
				uni.stopPullDownRefresh()
			}
		},
		onLoad() {
			this.getdictList()
			this.getSpUserList()
			this.getUsersByNames(['周明','杜薇'],'csList')
		},
		methods: {
			deletePers(index){
				this.process = index
			},
			changeSpUserArr(){
				if(this.clickNmu+1 < this.spUserList.length){
					this.clickNmu++;
				}else{
					this.clickNmu = 0
				}
				this.getUsersByNames(this.spUserList[this.clickNmu].userNameList.split(','),'userList')
			},
			async getUsersByNames(names,listName){
				const { data } = await listByNames(names);
				if(data.code == 200){
					if(listName == 'csList'){
						this.process[2].perList = data.data
						this.csList = data.data
						this.process[2].desc = '抄送' + this.csList.length + '人'
					}
					if(listName == 'userList'){
						this.process[1].perList = data.data
						this.userList = data.data
						this.process[1].desc = this.userList.length+'人依次审批'
					}
				}
			},
			/* 流程组件测试 */
			setPers(e) {
				this.process.forEach(item=>{
					if (this.t == 'choose') {
						if(item.title == this.type){
							item.perList.forEach(its=> {
								e.forEach(eIts => {
									if (its.userId == eIts.userId) {
										let getLocation = e.indexOf(eIts);
										e.splice(getLocation, 1)
									}
								})
							})
							item.perList=item.perList.concat(e)
						}
					} else if (this.t == 'add-more') {
						if(item.title == this.type){
							item.perList = e
						}
					}
					if(item.title == '抄送人'){
						this.csList = item.perList
						item.desc = "抄送" + item.perList.length + "人"
					}
					if(item.title == '审批人'){
						this.userList = item.perList
						item.desc = "审批" + item.perList.length + "人"
					}
					if(item.title == '质检人'){
						this.zjUser = item.perList
						item.desc = "质检" + item.perList.length + "人"
					}
				})
			},
			setProject(item){
				if(item.type == '项目'){
					this.info.projectName = item.name
					this.info.projectId = item.id
					this.info.fzrName = item.fzrName
					this.info.fzrId = item.fzrId
					this.info.clry = item.clry 
					this.info.firstCompany = item.firstCompany
					this.info.firstContacts = item.firstContacts
					this.info.firstPhone = item.firstPhone
				}else if(item.type == '负责人'){
					this.zjUser = [
						{
							userId:item.id,
							userName:item.name
						}
					]
				}
			},
			setChooseUsersCgw(e){
				this.cyrUsers = e 
				this.info.clry = e.map(e=>e.userName).join(',')
			},
			setChooseUser(e){
				this.info.fzrName = e[0].userName
				this.info.fzrId = e[0].userId
			},
			confirmDate(e){
				this.info[this.dateField] = strFormatDate(e.value)
				this.info[this.dateField+'Name'] = strFormatDate(e.value)
				this.dateShow = false
			},
			submit() {
				this.$refs.ruleForm.validate().then(res => {
					if(this.zjUser.length<1){
						uni.$u.toast('请选择质检人')
						return
					}
					if(this.userList.length<1){
						uni.$u.toast('请选择审批人')
						return
					}
					if(this.csList.length<2){
						uni.$u.toast('请选择两位抄送人')
						return
					}
					if(this.info.beginTime > this.info.endTime){
						uni.$u.toast('测量结束时间不能早于测量开始时间')
						return
					}
					if(this.info.endTime > this.info.time){
						uni.$u.toast('成果移交时间不能早于测量结束时间')
						return
					}
					// 提交审核
					this.zjUser.forEach(item=>{
						item.peopleType = '1'
					})
					this.userList.forEach(item=>{
						item.peopleType = '2'
					})
					this.info.spList = [...this.zjUser,...this.userList]
					// let zjNewUser = this.zjUser.map(obj => ({ ...obj, peopleType: '1' }));
					// let userNewList = this.userList.map(obj => ({ ...obj, peopleType: '2' }));
					// this.info.spList = [...zjNewUser,...userNewList]
					this.info.csList = this.csList
					this.addVacation()
				}).catch(errors => {
					uni.$u.toast('请将信息填写完整')
				})
			},
			async addVacation(){
				const { data } = await add(this.info);
				if(data.code == 200){
					uni.showToast({ title: '提交成功', icon: 'none' })
					setTimeout(() => {
						uni.navigateBack()
					}, 500)
				}else{
					uni.showToast({ title: data.msg, icon: 'none' })
				}
			},
			// 读取图片后事件
			afterRead(list,name) {
				list.file.forEach(e=>{
					this.uploadImage(e,name)
				})
			},
			async uploadImage(e,name){
				const result = await uploadFile(e.url)
				this[name].push(result)
			},
			// 删除图片后事件
			async deletePic(e,name) {
				let ossIds = []
				ossIds.push(this[name][e.index].ossId)
				const result = await removeByOssId(ossIds);
				this[name].splice(e.index, 1)
			},
			confirmPick(e){
				this.pickShow = false
				this.info[this.pickField] = e.value[0].name
			},
			closeUser(index,type) {
				if(this[type].length>this.showLength){
					this[type].splice(index+this[type].length-this.showLength,1)
				}else{
					this[type].splice(index,1)
				}
			},
			// 质检人
			setZj(e){
				this.process.forEach(item=>{
					if(item.title == this.type){
						item.perList = e
						this.zjUser = item.perList
						item.desc = "质检" + item.perList.length + "人"
					}
				})
			},
			// 审批人
			setUsers(e){
				this.process.forEach(item=>{
					if(item.title == this.type){
						item.perList = e
						this.userList = item.perList
						item.desc = "审批" + item.perList.length + "人"
					}
				})
			},
			// 抄送人
			setCc(e){
				this.process.forEach(item=>{
					if(item.title == this.type){
						item.perList = e
						this.csList = item.perList
						item.desc = "抄送" + item.perList.length + "人"
					}
				})
			},
			async getdictList(){
				const { data } = await getDicts('zxch_vacatoin_type');
				if(data.code == 200){
					data.data.map(e=>{
						let obj = {
							id: e.dictValue,
							name: e.dictLabel
						}
						this.range.push(obj)
					})
					this.range = [this.range]
				}
			},
			async getListData(){
				let params = {
					pageNum:this.pageNum,
				}
				const { data } = await getList(params);
				if(data.code == 200 && data.rows.length > 0){
					this.list = [...this.list,...data.rows]
				}
			},
			tabClick(item) {
				this.tabIndex = item.index
				if(item.index == 1){
					this.pageNum = 1
					this.list = []
					this.getListData()
				}
			},
			// 获取审批人列表
			async getSpUserList(params){
				const { data } = await getSpList(params);
				if(data.code == 200){
					this.spUserList = data.rows
					this.getUsersByNames(this.spUserList[0].userNameList.split(','),'userList')
				}
			}
		}
	}
</script>

<style>
	page{
		background-color: #f6f6f6;
		color: #333333;
	}
	
	.u-text__value {
		color: white !important;
	}
	
</style>
<style>
	.u-steps-item--column {
		margin: 30rpx 0 30rpx 10rpx;
		padding: 10rpx 0;
	}

	::v-deep .u-steps-item__line--column {
		height: 180rpx !important;
		background-color: #cdcdcd !important;
	}

	::v-deep .u-text__value--content {
		color: #131313;
		font-size: 33rpx !important;
	}

	::v-deep .u-steps-item__wrapper__dot {
		background-color: #cdcdcd !important;
	}
</style>